<!--  -->
<template>
    <view class="nav">
        <!-- #ifdef MP -->
        <u-navbar
            :title-color="textColor"
            :is-back="false"
            :title="title"
            :background="background"
            :border-bottom="false"
        >
        </u-navbar>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <u-navbar
            :title-color="textColor"
            height="44"
            :is-back="false"
            :title="title"
            :background="background"
            :border-bottom="false"
        >
            <view v-if="!custom" class="slot-wrap">
                <view v-if="isBack" class="back" @click="back()">
                    <image src="./images/ic_return.png" mode="" />
                </view>
                <view
                    class="left"
                    v-if="!isBack && showBackHostIcon"
                    @click="backToHost()"
                >
                    <image class="img" src="./images/home.png" />
                    <!-- <view
                        class="name"
                        :style="{
                            color: textColor,
                        }"
                        >随记</view
                    > -->
                </view>
                <slot name="title"></slot>
                <view v-if="showRight" class="btn">
                    <view class="more" @click="showPupModal()">
                        <view class="right">
                            <view
                                class="item"
                                v-for="(item, index) in 3"
                                :key="index"
                            ></view>
                            <view v-if="isFirst" class="tip">
                                点击“更多”内添加到桌面，在手机桌面即可快速打开微程序
                            </view>
                        </view>
                    </view>
                    <view class="close" @click="close">
                        <image src="./images/btn_close.png" mode="" />
                    </view>
                </view>
            </view>
        </u-navbar>
        <view class="pup" @click="showPup = false" v-if="showPup === true">
            <view
                @click.stop
                class="up"
                :style="{
                    transform: `translateY(${showPup ? '0' : '600rpx'})`,
                }"
            >
                <view class="title">
                    <view class="icon">
                        <image src="./images/logo.png" mode="" />
                    </view>
                    <view class="name">随记 {{ curent.name }}插件</view>
                </view>
                <view class="line"></view>
                <view class="content">
                    <view class="item" @click="addShot()">
                        <view class="icon">
                            <image src="./images/btn_add.png" mode="" />
                        </view>
                        <view class="name">添加到桌面</view>
                    </view>
                    <!--  <view class="item" @click="shareApp()">
                        <view class="icon">
                            <image src="./images/btn_show.png" mode="" />
                        </view>
                        <view class="name">分享</view>
                    </view> -->
                    <!--                    <view class="item" @click="toSetting()">
                        <view class="icon">
                            <image src="./images/btn_set.png" mode="" />
                        </view>
                        <view class="name">设置</view>
                    </view>-->
                    <view class="item" @click="toMoreSmallApp()">
                        <view class="icon">
                            <image src="./images/btn_more.png" mode="" />
                        </view>
                        <view class="name">更多微程序入口</view>
                    </view>
                    <view class="item"></view>
                </view>
                <view
                    @click.stop="hidePup()"
                    :style="{
                        background: hide_bg ? '#f7f9fd' : '#fffeff',
                    }"
                    class="close"
                    >取消</view
                >
            </view>
        </view>
        <!-- 添加快捷方式弹框 -->
        <u-modal
            v-model="showModal"
            :title="'已尝试添加到桌面'"
            :show-cancel-button="true"
            :confirm-text="'前往设置'"
            :cancel-text="`取消`"
            @confirm="modalConfirm()"
            @cancel="modalCancel()"
        >
            <view class="slot-content">
                <view class="content">
                    若添加失败，请前往系统设置，为随记打开“创建桌面快捷方式”的权限
                </view>
                <view class="add" @click="toHelp()"> 如何添加到桌面 </view>
            </view>
        </u-modal>
        <Notice
            :show="showCloseTips"
            @confirm="confirmClose()"
            @cancel="cancelClose()"
            @close="closeTips()"
        />
        <u-popup v-model="showshare" :mode="'bottom'" :border-radius="'16'">
            <view class="share_pup">
                <view class="scroll">
                    <view class="wechat item" @click="wxShare()">
                        <image src="./images/btn_wx.png" mode="" />
                        <view class="text">微信</view>
                    </view>
                    <view class="wechat item" @click="wxFrShare()">
                        <image src="./images/btn_pyq.png" mode="" />
                        <view class="text">朋友圈</view>
                    </view>
                    <view class="wechat item" @click="qqShare()">
                        <image src="./images/btn_qq.png" mode="" />
                        <view class="text">QQ</view>
                    </view>
                    <view class="wechat item" @click="copy()">
                        <image src="./images/btn_link.png" mode="" />
                        <view class="text">复制链接</view>
                    </view>
                </view>
                <view class="line"></view>
                <view class="btn_cancel" @click="showshare = false">
                    取消
                </view>
            </view>
        </u-popup>
        <!-- #endif -->
    </view>
</template>

<script>
import Notice from "./Notice/Notice";
// import uNavbar from ''
let appInfo = {
    appId: "",
};
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
    appInfo = widgetInfo;
    appInfo.appId = plus.runtime.appid;
});
// #endif
export default {
    data() {
        return {
            showPup: false,
            hide_bg: false,
            isFirst: false,
            prevPath: "",
            path: "",
            showModal: false,
            down: 5,
            showCloseTips: false,
            showshare: false,
            curent: {},
            showBackHostIcon: false,
        };
    },
    methods: {
        copy() {
            uni.setClipboardData({
                data:
                    "https://campaign.snmi.cn/miniprogram/index.html?appId=" +
                    appInfo.appId,
                success: () => {
                    this.showshare = false;
                    uni.showToast({
                        title: "复制成功",
                        duration: 1000,
                    });
                },
            });
        },
        qqShare() {
            uni.share({
                provider: "qq",
                scene: "QQSceneSession",
                type: 1,
                href:
                    "https://campaign.snmi.cn/miniprogram/index.html?appId=" +
                    appInfo.appId,
                title: "分享",
                summary: info.description,
                complete: () => {
                    this.showshare = false;
                },
            });
            this.showshare = false;
        },
        /* 微信朋友圈 */
        wxFrShare() {
            let info = getApp().globalData.appInfo;
            uni.share({
                provider: "weixin",
                scene: "WXSenceTimeline",
                type: 0,
                href:
                    "https://campaign.snmi.cn/miniprogram/index.html?appId=" +
                    appInfo.appId,
                summary: appInfo.description,
                imageUrl: "./images/suiji.png",
                complete: () => {
                    this.showshare = false;
                },
            });
            this.showshare = false;
        },
        /* 微信分享 */
        wxShare() {
            let info = getApp().globalData.appInfo;
            uni.share({
                provider: "weixin",
                scene: "WXSceneSession",
                type: 0,
                href:
                    "https://campaign.snmi.cn/miniprogram/index.html?appId=" +
                    info.appId,
                summary: appInfo.description,
                imageUrl: "./images/suiji.png",
            });
            this.showshare = false;
        },
        backToHost() {
            // #ifdef APP-PLUS
            uni.sendNativeEvent(
                "backHost",
                { appId: appInfo.appId },
                ret => {}
            );
            // #endif
        },
        closeTips() {
            this.showCloseTips = false;
        },
        confirmClose() {
            this.showCloseTips = false;
            // #ifdef APP-PLUS
            uni.sendNativeEvent("exitapp", { appId: appInfo.appId }, ret => {});
            plus.runtime.quit();
            // #endif
        },
        cancelClose() {
            uni.setStorage({
                key: "next_none_tips",
                data: "true",
                success: () => {
                    this.showCloseTips = false;
                    // #ifdef APP-PLUS
                    uni.sendNativeEvent(
                        "exitapp",
                        { appId: appInfo.appId },
                        ret => {}
                    );
                    plus.runtime.quit();
                    // #endif
                },
            });
        },
        toHelp() {
            plus.runtime.openURL(
                "https://campaign.snmi.cn/note/help/index.html"
            );
        },
        modalCancel() {
            this.showModal = false;
        },
        modalConfirm() {
            /* #ifdef APP-PLUS */
            uni.sendNativeEvent(
                "openSystemAuth",
                { appId: appInfo.appId },
                ret => {}
            );
            /* #endif */
        },
        openAddModal() {
            this.showModal = true;
        },
        // 更多功能弹窗
        showPupModal() {
            uni.hideTabBar();
            setTimeout(() => {
                this.showPup = true;
                this.isFirst = false;
                if (!this.isFirst) {
                    uni.setStorage({
                        key: "IS_FIRST_USE",
                        data: "true",
                    });
                }
            }, 10);
        },
        // 隐藏弹窗
        hidePup() {
            this.hide_bg = true;
            setTimeout(() => {
                this.hide_bg = false;
            }, 50);
            setTimeout(() => {
                this.showPup = false;
            }, 100);
        },
        // 添加到桌面 -- 不可用
        addShot() {
            this.openAddModal();
            /* #ifdef APP-PLUS */
            uni.sendNativeEvent(
                "addShot",
                {
                    appId: appInfo.appId,
                    unAppName: appInfo.name,
                },
                ret => {
                    if (ret) {
                        uni.showToast({
                            title: "添加成功!",
                            duration: 1000,
                        });
                    }
                }
            );
            /* #endif */
            this.hidePup();
        },
        // 分享应用
        shareApp() {
            this.hidePup();
            setTimeout(() => {
                this.showshare = true;
            }, 10);
        },
        // 设置
        toSetting() {
            // 获取当前页面路径
            if (this.path !== "/pages/setting/setting") {
                uni.navigateTo({
                    url: "/pages/setting/setting",
                });
            }
            this.hidePup();
        },
        // 更多程序入口
        toMoreSmallApp() {
            // #ifdef APP-PLUS
            uni.sendNativeEvent("exitapp", { appId: appInfo.appId }, ret => {});
            plus.runtime.quit();
            // #endif
        },
        // 退出应用
        close() {
            uni.getStorage({
                key: "next_none_tips",
                success: res => {
                    this.showCloseTips = false;
                    // #ifdef APP-PLUS
                    uni.sendNativeEvent(
                        "exitapp",
                        { appId: appInfo.appId },
                        ret => {}
                    );
                    plus.runtime.quit();
                    // #endif
                },
                fail: () => {
                    this.showCloseTips = true;
                },
            });
        },
        // 返回
        back() {
            if (this.isOwn) {
                this.$emit("back");
            } else {
                uni.navigateBack({
                    delta: 1,
                });
            }
        },
        getPath() {
            let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
            let curRoute = routes[routes.length - 1].route; //获取当前页面路由
            return "/" + curRoute;
        },
    },
    created() {
        // #ifdef APP-PLUS
        uni.sendNativeEvent("getInfoFromCenter", {}, ({ packageName }) => {
            if (packageName) this.showBackHostIcon = true;
        });
        // #endif
        this.showBackHostIcon = "";
        this.path = this.getPath();
        this.curent = appInfo;
    },
    props: {
        title: {
            type: String,
            default: "",
        },
        textColor: {
            type: String,
            default: "#000",
        },
        isBack: {
            type: Boolean,
            default: true,
        },
        isOwn: false,
        background: {
            backgroundColor: "#fff",
        },
        showMore: {
            type: Boolean,
            default: false,
        },
        showHost: {
            type: Boolean,
            default: false,
        },
        custom: {
            type: Boolean,
            default: false,
        },
        showRight: {
            type: true,
            default: true,
        },
    },
    components: {
        Notice,
    },
    watch: {
        showPup(n) {
            if (!n) uni.showTabBar();
        },
    },
};
</script>
<style lang="scss" scoped>
.share_pup {
    width: 100%;
    background: #f1f1f1;
    border-radius: 16rpx 16rpx 0px 0px;
    .scroll {
        display: flex;
        align-items: center;
        padding: 30rpx 40rpx;
        .item {
            margin-right: 47rpx;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            image {
                width: 100rpx;
                height: 100rpx;
            }
            .text {
                margin-top: 16rpx;
                font-size: 22rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #7b7e81;
                line-height: 14rpx;
            }
        }
    }

    .line {
        margin: 31rpx auto 0;
        width: 624rpx;
        height: 1rpx;
        background: #d2d4d7;
    }
    .btn_cancel {
        padding: 32rpx;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6b7178;
        line-height: 14rpx;
    }
}
::v-deep .u-navbar {
    z-index: 9999999 !important;
}
::v-deep .u-drawer {
    z-index: 99999999 !important;
}
.pup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    background: rgba(0, 0, 0, 0.7);
    .up {
        padding: 26rpx 36rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 441rpx;
        background: #f7f9fd;
        border-radius: 32rpx 32rpx 0px 0px;
        transition: all 1s;
        transform: translateY(-600rpx);
        z-index: 9999999999999;
        .title {
            padding-bottom: 26rpx;
            display: flex;
            align-items: center;
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 18rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .name {
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #41444e;
            }
        }
        .line {
            height: 2rpx;
            width: 100%;
            background: #dde3ef;
        }
        .content {
            height: 243rpx;
            display: flex;
            align-items: center;
            //justify-content: space-between;
            .item {
                display: flex;
                align-items: center;
                flex-direction: column;
                width: 25%;
                // margin-right: 48rpx;
                .icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 116rpx;
                    height: 116rpx;
                    background: #ffffff;
                    border-radius: 50%;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .name {
                    margin-top: 16rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #41444e;
                }
            }
        }
        .close {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 96rpx;
            background: #fffeff;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
        }
    }
}
::v-deep .u-icon__icon.uicon-close.u-iconfont {
    font-weight: 700 !important;
}
::v-deep .u-title {
    font-size: 36rpx !important;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #333333;
}
.slot-wrap {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34rpx;
    .back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44rpx;
        height: 44rpx;
        background: #000000;
        border-radius: 30rpx;
        opacity: 0.4;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .left {
        display: flex;
        align-items: center;
        .img {
            width: 48rpx;
            height: 48rpx;
            margin-right: 18rpx;
        }
        .name {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #41444e;
        }
    }
    .title {
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-right: 8rpx;
        image {
            width: 38rpx;
            height: 38rpx;
        }
    }
    .btn {
        display: flex;
        align-items: center;
        height: 56px;
        .more {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 56px;
            margin-right: 34rpx;
            .right {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16rpx;
                width: 68rpx;
                height: 40rpx;
                border-radius: 20rpx;
                background: rgba(0, 0, 0, 0.4);
                z-index: 99999;
                .item {
                    width: 8rpx;
                    height: 8rpx;
                    background: #ffffff;
                    border-radius: 50%;
                }
                .tip {
                    width: 400rpx;
                    padding: 12rpx;
                    position: absolute;
                    z-index: 99999;
                    top: 80rpx;
                    left: -260rpx;
                    background: #ffffff;
                    color: #000;
                    font-size: 24rpx;
                    border-radius: 12rpx;
                    box-shadow: 0 0 8rpx #ececec;
                }
                .tip::before {
                    content: "";
                    position: absolute;
                    left: 68%;
                    top: -42rpx;
                    width: 0;
                    height: 0;
                    border: 22rpx solid;
                    border-color: transparent transparent #ffffff;
                }
            }
        }
        .close {
            height: 100%;
            padding-top: 2rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44rpx;
            height: 44rpx;
            background: #000000;
            border-radius: 50%;
            opacity: 0.4;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.slot-content {
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    .add {
        margin-top: 28rpx;
        font-size: 28rpx;
        color: rgb(41, 121, 255);
    }
}
</style>
